<template>
<div id="Equipment">
  <van-tabs style="flex-shrink: 0;" @change="onSearch()" v-model="active" inverse indicator-color="#2196F3" color="#2196F3" 
    text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
    <van-tab :title="`在线(${ status.onLines || 0 })`"></van-tab>
    <van-tab :title="`离线(${ status.offLine || 0 })`"></van-tab>
  </van-tabs>
  <van-search v-model="content" placeholder="请输入" show-action shape="round"> 
    <div slot="label" @click="showAction = true">
      {{ labelName }}
      <van-icon name="arrow-down" />
    </div>       
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index">
        <div class="tongji-item">
          <div class="tongji-row">
            <div>设备编号：</div>
            <div>{{ item.equipmentNum }}</div>
          </div>
          <div class="tongji-row">
            <div>设备心跳时间：</div>
            <div>{{ item.heartTime }}</div>
          </div>
          <div class="tongji-row">
            <div>设备型号：</div>
            <div>{{ item.equipmentType }}口 </div>
          </div>
          <div class="tongji-row" v-if="$store.state.userInfo.roleType < 3">
            <div>可借宝数：</div>
            <div>{{ item.boorowSum }}个</div>
          </div>
          <div class="tongji-row" v-if="$store.state.userInfo.roleType < 3">
            <div>可还宝数：</div>
            <div>{{ item.returnSun }}个</div>
          </div>
          <div class="tongji-row">
            <div>shopId：</div>
            <div>{{ item.shopId }}</div>
          </div>
          <div class="tongji-row">
            <div>价格：</div>
            <div>{{ item.chargeMoney }}</div>
          </div>
          <div class="tongji-row">
            <div>所属商家：</div>
            <div class="ft-blue">{{ item.shopName }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>  
  
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="设备详情" left-arrow @click-left="blank.show = false"/>
      <div style="height: 2rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px solid #F1F1F1;">
        <img :src="blank.info.shopPhotUrl" style="width: 1.4rem; height: 1.4rem;"/>
        <div style="height: 1.6rem; width: 3.6rem; font-size: 0.25rem; line-height: 0.5rem;">
          <div class="ft-blue" style="font-size: 0.3rem; line-height: 0.6rem;">{{ blank.info.shopName }}</div>
          <div class="ft-org">{{ blank.info.equipmentNum }}</div>
          <div class="ft-grade">{{ blank.info.createTime }}添加</div>
        </div>
        <div></div>
        <!-- <div style="width: 1.3rem; height: 0.5rem; line-height: 0.5rem; text-align: center; color: #FFFFFF; border-radius: 0.1rem; font-size: 0.2rem;
          background: #16B8BE;" @click="allForce">全部弹出</div> -->
      </div>
      <div class="flex-body" style="background: #FFF;">
        <div class="bao-box" v-for="item in blank.list" :key="item.sn">
          <div class="bao-icon">宝</div>
          <div class="bao-content">
            <div class="bao-title">
              <span style="font-size: 0.3rem; color: #333; font-weight: bold;">卡槽位置:{{ item.n }}</span>
              <div class="bao-dianliang">{{ item.e * 10 }}%</div>
            </div>
            <div style="height: 0.35rem; line-height: 0.35rem; font-size: 0.28rem; color: #999; font-size: 0.3rem;">{{ item.sn }}</div>
          </div>
          <div class="bao-button" @click="oneForce( item.n )">弹出设备</div>
        </div>
      </div>
    </div>
  </van-popup>

  <van-action-sheet v-model="showAction" :actions="actions" @select="selectAction" cancel-text="取消"
   @cancel="showAction = false"/>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class Equipment extends Vue {

  active: any = 0  
  status: any = {
    onLines: 0,
    offLine: 0,
    isBinding: 0,
    notBinding: 0,
    fault: 0
  }

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  content: any = ''

  showAction: any = false
  labelName: any = '店铺名称'
  actions: any = [
    { name: '店铺名称' },
    { name: '设备编号' }
  ]
  selectAction(obj: any) {
    this.labelName = obj.name;
    this.showAction = false;
    this.onSearch();
  }
  
  getList() {
    let page = this.page, size = 10, vague = this.active, 
      userId = this.$store.state.userInfo.userId, equipmentNum = this.searchValue;
    let query: any = { page, size, vague, userId };
    if( this.labelName == '店铺名称' ) { query.equipmentNum = ''; query.content = this.content; } 
    else { query.equipmentNum = this.content; query.content = ''; }
    axios.get('/api/chargerPlaEquipmentController/getChargerPlaEquipmentList', query)
    .then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
      if(list.length == 0) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.$router.replace({ name: this.$route.name, query: { active: this.active } });
    this.getList();
  }

  blank: any = {
    show: false,
    info: {},
    list: []
  }
  allForce() {    
    this.$dialog.confirm({ message: `您确认要全部弹出充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.blank.info.equipmentNum, n: 0 }).then(() => this.$toast(`弹出成功！`));
    })
  }
  oneForce(n: any) {    
    this.$dialog.confirm({ message: `您确认要弹出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.blank.info.equipmentNum, n }).then(() => this.$toast(`弹出成功！`));
    });
  }

  created() {
    if(this.$route.query.active) this.active = Number(this.$route.query.active);
    axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', {
      userId: this.$store.state.userInfo.userId
    }).then((res: any) => {
      this.status = res;
    });
  }
  
};
</script>

<style lang="scss">
#Equipment {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;  
  .bao-box {
    width: 6.9rem;
    height: 1.8rem;
    background: #FFFFFF;
    border-radius: 0.14rem;
    margin: 0.2rem auto;
    box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
    position: relative;
    .bao-icon {
      width: 0.9rem;
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      border-radius: 50%;
      font-size: 0.4rem;
      color: #FFFFFF;
      background: #16B8BE;
      position: absolute;
      left: 0.23rem;
      top: 0.45rem;
    }
    .bao-content {
      position: absolute;
      top: 0.45rem;
      left: 1.4rem;
      .bao-title {
        height: 0.55rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        .bao-dianliang {
          width: 0.88rem;
          height: 0.38rem;
          line-height: 0.38rem;
          border-radius: 0.16rem;
          text-align: center;
          background: rgba(46,208,138,0.1);
          font-size: 0.16rem;
          color: #2ED08A;
          margin-left: 0.4rem;
        }
      }
    }
    .bao-button {
      width: 1.67rem;
      height: 0.54rem;
      line-height: 0.54rem;
      border-radius: 0.27rem;
      text-align: center;
      font-size: 0.25rem;
      color: #FFFFFF;
      background: #16B8BE;
      box-shadow: 3px 3px 18px 3px rgba( 22, 184, 190, 0.32 );
      position: absolute; 
      top: 0.45rem;
      right: 0.32rem;
    }
  }
}
</style>

